<template>
  <el-drawer
    v-model="showDrawer"
    :title="$t('兑换USDM')"
    size="35%"
    @close="emit('close')"
  >
    <el-card>
      <el-form
        :model="exchangeForm"
        ref="exchangeFormRef"
        label-position="top"
        :rules="rules"
      >
        <el-form-item
          prop="amount"
          :label="$t('兑换数量')"
          style="position: relative"
        >
          <div
            style="
              width: 100%;
              text-align: right;
              position: absolute;
              right: 0;
              top: -100%;
            "
          >
            {{ $t("余额") }} : {{ props.balance }} {{ props.currency }}
          </div>
          <div class="flex justify-between" style="width: 100%">
            <el-input
              v-model="exchangeForm.amount"
              :placeholder="$t('请输入兑换数量')"
            ></el-input>
            <el-button
              type="primary"
              text
              @click="exchangeForm.amount = props.balance"
            >
              {{ $t("全部") }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <span>1USDM = 1{{ props.currency }}</span>
        </el-form-item>

        <el-form-item>
          <div style="width: 100%; margin-top: 1.25rem">
            <el-button
              style="width: 100%"
              size="large"
              type="primary"
              :disabled="!isClickConfirmBtn"
              @click="confirmForm(exchangeFormRef)"
            >
              {{ $t("提交") }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>
</template>
<script setup>
import { ref, reactive, watch, toRefs, computed } from "vue";
import { postExChangeCoin } from "@/api/assetDetails/index";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
const router = useRouter();
const { t } = useI18n();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  balance: {
    type: Number,
    default: 0,
  },
  currency: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["close"]);
const loading = ref(true);
const showDrawer = ref(false);
watch(
  () => props.show,
  (newVal) => {
    showDrawer.value = newVal;
  },
  { immediate: true }
);

const exchangeFormRef = ref();
const exchangeForm = reactive({
  amount: "",
});
const isClickConfirmBtn = computed(() => {
  let isOk = true;
  if (Object.values(exchangeForm).some((value) => !value)) {
    isOk = false;
  }
  return isOk;
});
const checkAmount = (rule, value, callback) => {
  if (!value) {
    callback(new Error(t("请输入兑换数量")));
  } else if (Number(value) > Number(props.balance)) {
    callback(new Error(t("超过最余额最大值，请重新输入")));
  } else {
    callback();
  }
};
const rules = reactive({
  amount: [{ required: true, validator: checkAmount, trigger: "blur" }],
});
const showSonDrawer = ref(false);
const confirmForm = (formRef) => {
  if (!formRef) return;
  formRef.validate(async (valid, fields) => {
    if (valid) {
      console.log("submit!");
      const res = await postExChangeCoin({
        amount: exchangeForm.amount,
        currency: props.currency,
      });
      if (res) {
        ElMessage({
          showClose: true,
          message: t("提交成功"),
          type: "success",
          grouping: true,
        });

        emit("close");
        exchangeForm.amount = "";

        router.replace("/assetDetails/records");
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style lang="scss"></style>
